<template>
  <div class="home-page">
    <!-- 欢迎卡片 -->
    <el-card shadow="hover" class="welcome-card">
      <h1>欢迎使用惊喜一餐！</h1>
      <p>发现美食，畅享生活。</p>
    </el-card>

    <!-- 推荐餐厅标题 -->
    <el-divider>推荐餐厅</el-divider>

    <el-row :gutter="20">
      <!-- 推荐餐厅卡片 -->
      <el-col :span="8" v-for="restaurant in recommendedRestaurants" :key="restaurant.id">
        <!-- 让整个 el-card 都可点击，并跳转到详情页面 -->
        <el-card
            shadow="hover"
            class="restaurant-card"
            @click="goToDetails(restaurant.id)"
            :style="{ cursor: 'pointer' }"
        >
          <img :src="restaurant.image" alt="餐厅图片" class="restaurant-image" />
          <h3>{{ restaurant.name }}</h3>
          <p>评分：{{ restaurant.rating }}</p>

          <!-- 保留按钮，点击时跳转到详情页面，阻止事件冒泡 -->
          <el-button type="primary" @click.stop="goToDetails(restaurant.id)">查看详情</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "HomePage",
  data() {
    return {
      recommendedRestaurants: [
        { id: 1, name: "餐厅A", image:"/src/assets/picture/111.jpg", rating: 4.8 },
        { id: 2, name: "餐厅B", image:"/src/assets/picture/222.jpg", rating: 4.5 },
        { id: 3, name: "餐厅C", image:"/src/assets/picture/333.jpg", rating: 4.3 },
      ],
    };
  },
  methods: {
    goToDetails(id) {
      this.$router.push(`/restaurant/${id}`);
    },
  },
};
</script>

<style scoped>
.home-page {
  padding: 20px;
}

.welcome-card {
  text-align: center;
  margin-bottom: 20px;
}

.restaurant-card {
  text-align: center;
  padding: 20px;
}

.restaurant-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  margin-bottom: 10px;
}
</style>
